<template >
  <div class="public-nav">
    <div class="left" @click="$router.push('/')"></div>
    <p>{{ title }}</p>
    <template v-if="show != 'false' && show != 'chat'">
      <div class="btn" v-if="show" @click="$router.push('/record')">Record</div>
    </template>
    <template v-else-if="show === 'chat'">
      <div class="chat-box">
        <div class="radius"></div>
        <p>ON-LINE</p>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    show: {
      type: String,
      default: "true"
    },
    title: {
      type: String,
      required: true
    }
  },
  data () {
    return {

    }
  },
  methods: {}
}
</script>

<style lang="scss" scoped>
.public-nav {
  @include center;
  height: rem(44);
  background-color: #0162ff;
  color: #fff;
  position: relative;

  .left {
    width: rem(12);
    height: rem(12);
    border-bottom: rem(2) solid #fff;
    border-left: rem(2) solid #fff;
    transform: rotate(45deg);
    position: absolute;
    left: rem(22);
  }

  p {
    font-size: rem(16);
    font-weight: normal;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    line-height: rem(30);
    text-align: center;
  }

  .btn {
    padding: 0 rem(10);
    height: rem(25);
    background: rgba(0, 0, 0, 0.1);
    border-radius: rem(8);
    font-size: rem(14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: rem(1) solid hsla(0, 0%, 100%, 0.5);
    position: absolute;
    right: rem(15);
    top: rem(10);
  }

  .chat-box {
    padding: rem(10);
    @include vC;
    position: absolute;
    right: rem(15);

    .radius {
      width: rem(10);
      height: rem(10);
      background-color: #41f90e;
      border-radius: 100%;
    }

    p {
      margin-left: rem(5);
      color: #41f90e;
      font-size: rem(14);
      font-weight: 700;
      line-height: rem(19);
    }
  }
}
</style>
